import Taro, { Component } from '@tarojs/taro'
import PropTypes from 'prop-types'
import _ from 'lodash'
import { View, Input, Text } from '@tarojs/components'
import { AtIcon } from 'taro-ui'
import { generateQueryString } from '../../utils/index'
import { trafficText } from '@/utils/constants'
import './index.scss'

/**
 *  路线组件
 * 	@param data 
 * 	@param isMore 显示寄件人、收件人、运输类型
 * 	@param isEdit 
 * 	@param onLeftClick 
 * 	@param onRightClick 
 * 	@param onTrafficClick
 * ```
 * data = {
 * 	type: 			运输类型代码
 * 	typeCn:			运输类型中文
 * 	lineStart: 	出发地
 * 	lineEnd:		目的地
 * 	sender: 		寄件人
 * 	receiver: 	收件人
 * }
 * ```
 */
class AddressLine extends Component {

	static propTypes = {
		data: PropTypes.object,
		isMore: PropTypes.bool,
		traType: PropTypes.string,      // 运输类型
		size: PropTypes.string,					// 图片大小 default， large
		onLeftClick: PropTypes.func,
		onRightClick: PropTypes.func,
		onTrafficClick: PropTypes.func,
	}

	static defaultProps = {
		isMore: false,
		traType: 'air_traffic',
		size: 'default',
		data: {}
	}

	render(){
		const { data, isMore, isEdit, traType, size, onLeftClick, onRightClick, onTrafficClick  } = this.props
		const lineStart = this.handleCutLineStation(data.lineStart)
		const lineEnd = this.handleCutLineStation(data.lineEnd)

		return(
			<View className='address-line'>
				<View className='address-line-state' onClick={() => {
					onLeftClick && onLeftClick()
				}}>
					{data.lineStart ? <View>{lineStart}</View> : <View className='line-null-left'/>}
					{isMore && <View className='address-line-state-name'>{data.sender || ''}</View>}
				</View>
				<View className='address-line-mid'>
					<View className='address-line-mid-line' onClick={() => {
						onTrafficClick && onTrafficClick()
					}}>
						<View className={`address-line-type line-img-size-${size} line-img-${traType}`}></View>
						<View className='line-lines'>
							<View className='line-graph'></View>
							<View className='line-graph'></View>
							<View className='line-graph'></View>
							<View className='line-graph'></View>
						</View>
					</View>
					{isMore && <View className='address-line-mid-text'>{data.typeCn}</View>}
				</View>
				<View className='address-line-state' onClick={() => {
					onRightClick && onRightClick()
				}}>
					{data.lineEnd ? <View>{lineEnd}</View> : <View className='line-null-right' />}
 					{isMore && <View className='address-line-state-name'>{data.receiver || ''}</View>}
				</View>
			</View>
		)
	}

	handleCutLineStation = (str) => {
		let line = str
		if(str){
			const arr = str.split(' ')
			if(arr.length > 2){
				line = arr[1]+arr[2]
				if(line.length > 8){
					line = line.substring(0, 7)+'...'
				}
			}
		}

		return line
	}

}

export default AddressLine